import { useTranslation } from 'react-i18next';
import { motion } from 'framer-motion';

export function HeroSection() {
  const { t } = useTranslation();

  return (
    <section className="py-20 md:py-32 bg-gradient-to-r from-blue-50 to-indigo-50 overflow-hidden">
      <div className="container mx-auto px-4 relative">
        {/* Background elements */}
        <div className="absolute top-0 right-0 w-1/3 h-full opacity-10">
          <div className="w-full h-full bg-blue-500 rounded-l-full blur-3xl"></div>
        </div>
        
        <div className="absolute bottom-0 left-0 w-1/4 h-1/2 opacity-10">
          <div className="w-full h-full bg-indigo-500 rounded-r-full blur-3xl"></div>
        </div>
        
        {/* Hero content */}
        <div className="relative z-10 max-w-4xl mx-auto text-center">
          <motion.h1 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-4xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight"
          >
            {t('hero.title')}
          </motion.h1>
          
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="text-xl md:text-2xl text-gray-600 mb-10 leading-relaxed"
          >
            {t('hero.subtitle')}
          </motion.p>
          
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="flex flex-col sm:flex-row justify-center gap-4"
          >
            <a 
              href="#services" 
              className="px-8 py-4 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-all duration-300 transform hover:scale-105 font-medium shadow-lg hover:shadow-xl"
            >
              {t('hero.ctaButton')}
            </a>
            <a 
              href="#about" 
              className="px-8 py-4 bg-white hover:bg-gray-50 text-blue-500 border border-blue-500 rounded-md transition-all duration-300 transform hover:scale-105 font-medium shadow-md hover:shadow-lg"
            >
              {t('hero.learnMore')}
            </a>              
          </motion.div>
        </div>
      </div>
    </section>
  );
}